import React, { useState } from 'react';
import { SortableContainer as Sc } from 'react-sortable-hoc';
import { arrayMoveImmutable } from 'array-move';
import './index.css';
const SortableContainer = Sc((props: any) => <tbody {...props} />);
const DraggableContainer: React.FC<any> = (props) => {
  const {columns,sortColumns,...restprops} = props;
  const [ dataSource,setDataSouce] = useState(columns);
  const onSortEnd = (params: any) => {
    const { oldIndex, newIndex } = params
    if (oldIndex !== newIndex) {
      const newData = arrayMoveImmutable([].concat(dataSource), oldIndex, newIndex).filter(el => !!el);
      setDataSouce(newData);
      //更新表格数据展示
      sortColumns(newData);
    }
  };

  return (
    <SortableContainer
      useDragHandle
      disableAutoscroll
      helperClass="row-dragging"
      onSortEnd={onSortEnd}
      {...restprops}
    />
  )
}
export default DraggableContainer;
